<template>
    <div class="qilin-headerNav qilin-py-1 qilin-px-2">
        <el-row>
            <el-col :span="12" class="qilin-headerNav-logo">
                <img src="@/assets/images/image16.jpeg" alt="">
                <span class="qilin-ml-2">图书管理系统</span>
            </el-col>
            <el-col :span="12" class="qilin-headerNav-user qilin-mt-1">
                <div class="qilin-headerNav-user-box">
                    <img src="@/assets/images/image01.jpg"
                        alt="图片资源已删除"
                    >
                    <div class="qilin-headerNav-user-box-text qilin-py-0 qilin-pr-1 qilin-pl-2">
                        <p>欢迎</p>
                        <p class="qilin-mt-1">桃桃桃桃桃</p>
                    </div>
                    <span class="qilin-headerNav-user-box-arrow">
                        <el-dropdown trigger="hover" @command="handleCommand">
                            <span class="el-dropdown-link">
                                <el-icon><CaretBottom /></el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="info">个人信息</el-dropdown-item>
                                    <el-dropdown-item command="exit">退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </span>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data(){
        return {

        }
    },
    methods:{
        //点击下拉菜单对应事件监听
        handleCommand(val){
            switch(val){
                case "info":
                    // showUserInfo();
                    this.$router.push({
                        name:"user"
                    });
                    break;
                case "exit":
                    this.exit();
                    break;
            };
        },
        //点击退出事件监听
        exit(){
            ElMessageBox.confirm("确认退出系统吗？","温馨提示",{
                confirmButtonText:"确认",
                cancelButtonText:"取消",
                showCancelButton:true,
                closeOnClickModal:false,
                type:"warning"
            }).then(()=>{
                //回到登录页面
                this.$router.push("/login");
            }).catch((err)=>{
                console.log("取消退出操作",err);
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.qilin-headerNav{
    @include QilinWidthHeight(100%,4.286rem);
    min-width:42.857rem;
    background-color:$color-theme-common-dark;
    color:#fff;
    border-bottom:1px solid $color-theme-common-light;
    font-size:$size-text-default !important;
    >.el-row{
        height:100%;
        >.qilin-headerNav-logo{
            text-align:left;
            @include QilinFlex(row,nowrap,flex-start);
            >img{
                @include QilinWidthHeight($rem40,$rem40);
                border-radius:$radius-circle;
            }
            >span{
                font-weight:bolder;
                font-size:$size-text-large;
            }
            >i{
                font-size:$size-text-large;
                margin-left:$rem5;
            }
        }
        >.qilin-headerNav-user{
            float:right;
            >.qilin-headerNav-user-box{
                @include QilinFlex(row,nowrap,flex-end);
                >img{
                    @include QilinWidthHeight($rem40,$rem40);
                    border-radius:$radius-circle;
                }
                >.qilin-headerNav-user-box-text{
                    text-align:center;

                    >p:last-child{
                        color:#fff;
                        font-weight:bolder;
                    }
                }
                >.qilin-headerNav-user-box-arrow{
                    .el-dropdown-link{
                        color:#fff;
                        margin-left:6px;
                        border:0;
                        outline: 0;
                    }
                }
            }
        }
    }
}
</style>